<template>
  <component v-if='detail_id&&components_name' :is='components_name' :items_right='items_right' :ctl="ctl" :items_middle="items_middle" :items_left="items_left" :detail_id="detail_id" :modalShow="modalShow" :items_all="items_all" ></component>
</template>

<script type="text/ecmascript-6">
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';
import _ from 'lodash';

import Trodetail from 'components/detail/layout/Trodetail';

export default {
  data() {
    return {
      items:null,
      items_all:null,
      showFields:logic.detail.showFields(this.ctl)
    }
  },
  methods: {

    selectEvent(val,fname) {
      this.val=val
    },
    getDetail(id){
      logic.detail.get_detail_info(this, id);

    }
  },
  created(){
    this.getDetail(this.detail_id);
  },
  watch: {
    detail_id:function (val,old) {
      if(val) {
        this.getDetail(val);
      }

    }
  },
  computed: {
    components_name() {
      return logic.detail.get_use_detail(this);
    },
    items_chunked(){
      if(this.items&&this.items.length>0) {
        let chunked= logic.detail.get_chunked(this, this.ctl);
        return chunked;
      }
      return null;
    },
    items_left(){
      if(this.items_chunked&&this.items_chunked.length>0) {
        return this.items_chunked[0];
      }
      return null;
    },
    items_middle(){
      if(this.items_chunked&&this.items_chunked.length>0) {
        return this.items_chunked[1];
      }
      return null;
    },
    items_right(){
      if(this.items_chunked&&this.items_chunked.length>0) {
        return this.items_chunked[2];
      }
      return null;
    }
  },
  components: {
    Trodetail
  },
  props: ['ctl','detail_id','modalShow']
};
</script>

<style rel="stylesheet/less" scoped lang="less">
  .segment.diverse.mydetailCom {
    .item{
      color: #000;
    }
    
  }
</style>
